<template>
    <div class="leftTop">
        <div class="bg-color-black">
            <div class="d-flex pt-2 pl-2">
                <span>
                  <icon name="chart-bar" class="text-icon"></icon>
                </span>
                <div class="d-flex">
                    <span class="fs-xl text mx-2">人才类型标签</span>
                    <dv-decoration-3 class="dv-dec-3"/>
                </div>
                <div class="d-flex typeBut">
                    <span class="tab1" @click="typeShowClick(1)">类型</span>
                    <span class="tab2" @click="typeShowClick(0)">标签</span>
                </div>
            </div>
            <div class="typeContent">
                <template v-if="typeShow">
                    <template v-if="!isChildren">
                        <div class="item" v-for="item in typeList" :key="item.dataId"><span class="cursor" @click="typeClick(item)">{{item.dictName}}</span></div>
                    </template>
                    <template v-if="isChildren">
                        <div class="item childrenItem"><span class="parent cursor" @click="goParent">{{childrenTypeTitle}}</span></div>
                        <div class="item childrenItem" v-for="item in childrenTypeList" :key="item.dataId">
                            <span class="cursor" :style="{color: curDataId==item.dataId?'#ffc008':'#fff'}" @click="childrenTypeClick(item)">{{item.dictName}}</span>
                            <!--curDataId = item.dataId-->
                        </div>
                    </template>
                </template>
                <template v-if="!typeShow">
                    <word-cloud-chart ref="wordCloudChart"></word-cloud-chart>
                </template>
            </div>
        </div>
    </div>
</template>

<script>
    import wordCloudChart from "./wordCloudChart";
    export default {
        name: "leftTop",
        components: { wordCloudChart },
        data() {
            return {
                curDataId: '',
                typeShow: true,
                typeList: [],
                childrenTypeList: [],
                childrenTypeTitle: '',
                isChildren: false
            }
        },
        mounted() {
            this.getType1()
        },
        methods: {
            typeShowClick(e){
                this.typeShow = !!e
                if(e){
                    if(!this.typeList.length){
                        this.getType1()
                    }
                    this.isChildren = false
                }
            },
            getType1(){
                this.$http.get(this.$apis.systemDict.findMultiDataTreesByCode, {typeCode:'person_type'}).then(res => {
                    const data = res.data
                    const opt = {
                        key: 'dataId',
                        parentKey: 'parentId',
                        children: 'children'
                    }
                    this.typeList = this.$utils.toArrayTree(data, opt)
                    this.$emit('cur-type', this.typeList[0].children[0])
                })
            },
            typeClick(item){
                this.isChildren = true
                this.childrenTypeTitle = item.dictName
                this.childrenTypeList = item.children
            },
            goParent(){
                // this.curDataId = ''
                this.isChildren = false
            },
            childrenTypeClick(item){
                console.log(item)
                this.curDataId = item.dataId
                this.$emit('on-click', item)
            }
        }
    }
</script>

<style scoped lang="scss">
    .leftTop {
        $box-width: 100%;
        $box-height: 300px;
        padding: 16px;
        height: $box-height;
        min-width: $box-width;
        border-radius: 5px;

        .bg-color-black {
            height: $box-height - 30px;
            border-radius: 10px;overflow: hidden;
        }
        .pt-2 {
            justify-content: center;
        }
        .text {
            color: #c3cbde; font-size: 16px;
        }
        .dv-dec-3 {
            position: relative;
            width: 100px;
            height: 20px;
            top: -3px;
        }
        .typeBut {
            margin-left:auto; padding-right: 8px;
            span { padding: 4px 6px; border-radius:3px; color: #fff; cursor: pointer}
            span.tab1{ background: #ffc107; margin-right: 6px; }
            span.tab2{ background: #38d4ba; }
        }
        .typeContent {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            align-content: space-between;
            /*justify-content: space-around;*/
            padding-top: 13px;     padding-left: 10px;
            .item {
                width: 50%; margin: 4px 0; text-align: center;
                span {
                    display: block; font-size: 18px;
                    margin: 0 5px; padding: 13px 0;
                    border-radius: 5px;
                    border: 1px solid #343f4b;
                    background-color: rgba(14,162,255,0.8); color: #fff;
                }
                .cursor {cursor: pointer;}
            }
            .item.childrenItem {width: 32%;
                span {background-color: rgba(19,25,47,0.8);}
                .parent {background: #38d4ba;}
            }
        }
    }
</style>
